<template>
	<view class="index">
		<view class="index-top">
			<view class="top-t">
				<view class="top-flex">
					<image src="../../static/image/search.png" mode=""></image>
					<input type="text" value="" placeholder-style="font-size:14px;color:#979797;" placeholder='大家都在搜索 "和田玉"' />
				</view>
			</view>
			<view class="top-b">
				<view class="b-ul">
					<view class="b-li" v-for="(item,index) in recommend">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="index-center">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src=" 'http://gy.hyq.ink/' + item.image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="index-center-flex">
			<view class="index-center-ul">
				<view class="index-center-li" v-for="(item,index) in parem">
					<image :src=" '/static/image/' + item.icon + '.png' " mode=""></image>
					<view class="index-center-li-text">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="index-bottom">
			<view class="bottom-top">
				<image src="/static/image/icon-xs.png" mode=""></image>
				<text>限时抢购</text>
			</view>
			<view class="bottom-ul">
				<view class="bottom-li" v-for="(item, index) in goods.list" :key="index">
					<image :src=" 'http://gy.hyq.ink/' + item.image" mode=""></image>
					<view class="bottom-bo">
						<view class="index-name">
							<text>{{item.name}}</text>
						</view>
						<view class="name-flex">
							<view class="bottom-money">
								<text>{{item.price}}</text>
							</view>
							<view class="name-purchase"  @click="handleToShopCart(item.id)">
								<text>立即抢购</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/** 轮播图列表 */
				bannerList: [],
				/** 商品列表 */
				goods: {
					list: [],
					page: 1,
				},
				recommend: [{
						text: '今日推荐'
					},
					{
						text: '翡翠'
					},
					{
						text: '珠宝珍珠'
					},
					{
						text: '和田玉'
					},
					{
						text: '原石板料'
					},
				],
				parem: [{
						icon: 'icon-qc',
						title: '发现好货'
					},
					{
						icon: 'icon-fx',
						title: '清仓'
					},
					{
						icon: 'icon-tm',
						title: '特卖'
					},
					{
						icon: 'icon-ct',
						title: '厂通货'
					},
				],
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			/** 添加到购物车(生成订单) */
			handleToShopCart(id) {
				let parameter = {
					goods_id: id,
				};
				this.$post(this.api.orderCreate, parameter, 'post').then((res) => {
					console.log(res)
					/** 跳转至购物车页面 */
					uni.switchTab({
						url: '../shopping/shopping'
					})
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 获取首页信息 */
			getHomePageData() {
				this.$post(this.api.getHomePageData, {}, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					console.log(res)
					this.bannerList = res.data.banner;
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 获取商品列表 */
			getGoodsList() {
				let parameter = {
					page: 1,
				};
				this.$post(this.api.getGoodsList, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					this.goods.list = res.data.list;
					this.goods.page = res.data.count;
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 页面初始化 */
			init() {
				this.getHomePageData();
				this.getGoodsList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		.index-top {
			width: 750rpx;
			height: 213rpx;
			margin: 0 auto;

			.top-t {
				width: 750rpx;
				height: 141rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				.top-flex {
					width: 698rpx;
					height: 60rpx;
					background: #F0F0F0;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;

					image {
						width: 33rpx;
						height: 33rpx;
					}

					input {
						margin-left: 20rpx;

					}
				}

			}

			.top-b {
				height: 72rpx;
				background: linear-gradient(0deg, #FFFFFF 52%, #F9F9F9 100%);

				.b-ul {
					width: 749rpx;
					margin: 0 auto;
					display: flex;
					.b-li {
						margin: 0 auto;
						margin-top: 10rpx;
						padding: 5rpx 20rpx;
						height: 50rpx;
						background: #FFF6E7;
						border-radius: 5rpx;
						text-align: center;
						line-height: 50rpx;
						white-space: nowrap;
						text {
							font-size: 26rpx;
							font-weight: 500;
							color: #CA984F;
							line-height: 32rpx;
						}
					}
				}
			}
		}

		.index-center {
			margin-top: 20rpx;

			swiper {
				width: 728rpx;
				height: 332rpx;
				margin: 0 auto;

				.swiper-item {
					height: 100%;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.index-center-flex {
			.index-center-ul {
				padding: 20rpx 0;
				width: 700rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				.index-center-li {
					position: relative;
					image {
						width: 144rpx;
						height: 144rpx;
					}
					.index-center-li-text {
						width: 114rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						text-align: center;
						transform: translate(-50%, -50%);
						white-space: nowrap;
						text {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 32rpx;
						}
					}
				}
			}
		}

		.index-bottom {
			width: 749rpx;
			margin: 0 auto;

			.bottom-top {

				padding: 20rpx;
				display: flex;
				align-items: center;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				text {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #000000;
					padding-left: 20rpx;
				}
			}

			.bottom-ul {
				width: 749rpx;
				padding: 10rpx 0;
				display: flex;
				flex-wrap: wrap;
				.bottom-li {
					padding: 10rpx 2rpx;
					width: 369rpx;
					height: 481rpx;
					background-image: url(../../static/image/icon-bjban.png);
					background-repeat: no-repeat;
					background-size: 369rpx 481rpx;
					image {
						width: 350rpx;
						height: 328rpx;
						display: block;
						margin: 0 auto;
					}
					.bottom-bo {
						.index-name {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #2D2D2D;
							line-height: 32rpx;
							padding: 20rpx;
						}
						.name-flex {
							padding: 0 25rpx;
							width: 300rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.bottom-money {
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #CA984F;
								line-height: 32rpx;
							}
							.name-purchase {
								width: 117rpx;
								height: 44rpx;
								line-height: 44rpx;
								text-align: center;
								background-image: url(../../static/image/icon-db.png);
								background-repeat: no-repeat;
								background-size: 100% 100%;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>
